<template>
    <el-form-item
        :label="item.label && !item.question ? item.label : ''"
        :prop="item.prop"
    >
        <span slot="label" v-if="item.question">
            <el-tooltip :content="item.question" placement="top">
                <i class="el-icon-question"></i>
            </el-tooltip>
            {{ item.label }}
        </span>
        <el-cascader
            v-model="formData[item.prop]"
            ref="cascader"
            :options="item.options"
            :props="item.props"
            :size="item.size"
            :placeholder="item.placeholder"
            :disabled="item.disabled"
            :clearable="item.clearable"
            :show-all-levels="item.showAllLevels"
            :collapse-tags="item.collapseTags"
            :separator="item.separator"
            :filterable="item.filterable"
            :filter-method="item.filterMethod"
            :popper-class="item.popperClass"
            :class="item.class"
            @change="onCascaderChange"
            @expand-change="onCascaderExpandChange"
            @blur="onCascaderBlur"
            @focus="onCascaderFocus"
            @visible-change="onCascaderVisibleChange"
            @remove-tag="onCascaderRemoveTag"
        />
    </el-form-item>
</template>
<script>
import mixin from '../mixins/index.js'
export default {
    name: 'df-cascader',
    mixins: [mixin],
    props: {
        item: {
            type: Object,
            default() {
                return {
                    /**
                     * 级联选择器可选项数据源，键名可通过 Props 属性配置
                     * @type Arrray
                     * @value []
                     */
                    options: [
                        {
                            value: 'zhinan',
                            label: '指南'
                        }
                    ],
                    /**
                     * 输入框关联的label文字
                     * @type String
                     * @value ''
                     */
                    label: '',
                    /**
                     * 级联选择器配置选项
                     * @type Object
                     * @value { expandTrigger: 'hover' }
                     */
                    props: {},

                    /**
                     * 级联选择器尺寸
                     * @type String
                     * @value medium / small / mini
                     */
                    size: 'medium',
                    /**
                     * 级联选择器输入框占位文本
                     * @type String
                     * @value '请选择'
                     */
                    placeholder: '请选择',
                    /**
                     * 级联选择器是否禁用
                     * @type Bolean
                     * @value false/true
                     */
                    disabled: false,
                    /**
                     * 是否支持清空选项
                     * @type Bolean
                     * @value false/true
                     */
                    clearable: false,
                    /**
                     * 输入框中是否显示选中值的完整路径
                     * @type Bolean
                     * @value false/true
                     */
                    showAllLevels: true,
                    /**
                     * 多选模式下是否折叠Tag
                     * @type Bolean
                     * @value false/true
                     */
                    collapseTags: false,
                    /**
                     * 选项分隔符
                     * @type string
                     * @value '/'
                     */
                    separator: ' / ',

                    /**
                     * 是否可搜索选项
                     * @type Bolean
                     * @value false/true
                     */
                    filterable: ' / ',
                    /**
                     * 自定义选项搜索逻辑
                     * @type function
                     * @param node object 节点
                     * @param keyword string 搜索关键词
                     * @return result boolean 通过返回布尔值表示是否命中
                     */
                    filterMethod: function() {
                        return true
                    },
                    /**
                     * 自定义浮层类名
                     * @type string
                     * @value '/'
                     */
                    popperClass: '',
                    /**
                     * 自定义单选框组类名
                     * @type string
                     * @value 'red'
                     */
                    class: ''
                }
            }
        },
        /**
         * 提交的表单项
         * @type Object
         */
        formData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        /**
         * 当选中节点变化时触发
         * @param 选中节点的值
         */
        onCascaderChange(data) {
            this.dispatch('baseForm', 'onCascaderChange', {
                data: data,
                prop: this.item.prop
            })
        },
        /**
         * 当展开节点发生变化时触发
         * @param 各父级选项值组成的数组
         */
        onCascaderExpandChange(data) {
            this.dispatch('baseForm', 'onCascaderExpandChange', {
                data: data,
                prop: this.item.prop
            })
        },
        /**
         * 当失去焦点时触发
         * @param (event: Event)
         */
        onCascaderBlur(event) {
            this.dispatch('baseForm', 'onCascaderBlur', {
                event,
                prop: this.item.prop
            })
        },
        /**
         * 当获得焦点时触发
         * @param (event: Event)
         */
        onCascaderFocus(event) {
            this.dispatch('baseForm', 'onCascaderFocus', {
                event,
                prop: this.item.prop
            })
        },
        /**
         * 下拉框出现/隐藏时触发
         * @param 出现则为 true，隐藏则为 false
         */
        onCascaderVisibleChange(data) {
            this.dispatch('baseForm', 'onCascaderVisibleChange', {
                data,
                prop: this.item.prop
            })
        },
        /**
         * 在多选模式下，移除Tag时触发
         * @param 移除的Tag对应的节点的值
         */
        onCascaderRemoveTag(data) {
            this.dispatch('baseForm', 'onCascaderRemoveTag', {
                data,
                prop: this.item.prop
            })
        }
    }
}
</script>

<style lang="scss"></style>
